<template>
	<div>
		<uni-list>
			<uni-list-item title="项目名称" :rightText="formData.projectName" />
			<uni-list-item title="所属客户" :rightText="formData.customer?formData.customer.customerName:''" />
			<uni-list-item title="项目负责人" :rightText="formData.leader" />
			<uni-list-item title="联系电话" :rightText="formData.phone" />
			<uni-list-item title="所在地址" :rightText="formData.districtName+''+formData.address" />
			<uni-list-item title="开始日期" :rightText="formData.beginDate" />
			<uni-list-item title="结束日期" :rightText="formData.endDate" />
			<uni-list-item v-if="formData.settleType!='5'" title="结算方式" :rightText="settleType_[formData.settleType]" />
			<uni-list-item v-else title="结算方式" :rightText="settleType[formData.settleType]+''+formData.monthlyDays+'天'" />
			<uni-list-item>
				<template v-slot:body>
					<text style="font-size: 14px;color: #3b4144;overflow: hidden;width: 90px;">相关附件</text>
				</template>
				<template v-slot:footer>
					<div style="flex: 1;">
						<myfilepicker readonly :fileIdString="formData.attachInfo" :fileMediatype="'all'"></myfilepicker>
					</div>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:body>
					<text style="font-size: 14px;color: #3b4144;overflow: hidden;width: 90px;">收/发货人</text>
				</template>
				<template v-slot:footer>
					<div style="flex: 1;color: #999;font-size: 12px;text-align: end;">
						<view v-for="(item,index) in shipList" :key="index">
							<text>{{item.customer?item.customer.customerName:''}}</text>
							<text style="margin-left: 5px;">{{item.shipFlag=='0'?'收货方':'发货方'}}</text>
						</view>
					</div>
				</template>
			</uni-list-item>
			<uni-list-item title="备注" :rightText="formData.remark" />
		</uni-list>
		<view style="height: 20px;"></view>
		<view v-if="shipLineList.length>0" style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">合作线路</view>
		</view>
		<!-- <template v-if="shipLineList.length>0"><uni-tag style="margin-left: 15px;" :inverted="true" text="合作线路" type="primary" /></template> -->
		<view v-for="(item,index) in shipLineList" :key="index">
			<uni-card>
				<div style="display: flex;font-size: 12px;">
					<view style="display: flex;flex: 1;">
						<text>发货方：</text>
						<text style="flex: 1;">{{item.sendCustomer.customerName}}</text>
					</view>
					<view style="display: flex;flex: 1;">
						<text>收货方：</text>
						<text style="flex: 1;">{{item.recvCustomer.customerName}}</text>
					</view>
				</div>
				<div style="display: flex;font-size: 12px;">
					<view style="display: flex;flex: 1;">
						<text>始发地：</text>
						<text style="flex: 1;">{{item.sendBook.bookDistrictName}}{{item.sendBook.bookAddress}}</text>
					</view>
					<view style="display: flex;flex: 1;">
						<text>目的地：</text>
						<text style="flex: 1;">{{item.recvBook.bookDistrictName}}{{item.recvBook.bookAddress}}</text>
					</view>
				</div>
				<div style="display: flex;font-size: 12px;">
					<view style="display: flex;flex: 1;">
						<text>联系人：</text>
						<text style="flex: 1;">{{item.sendBook.contactName}}</text>
					</view>
					<view style="display: flex;flex: 1;">
						<text>联系人：</text>
						<text style="flex: 1;">{{item.recvBook.contactName}}</text>
					</view>
				</div>
				<div style="display: flex;font-size: 12px;">
					<view style="display: flex;flex: 1;">
						<text>联系电话：</text>
						<text style="flex: 1;">{{item.sendBook.phone}}</text>
					</view>
					<view style="display: flex;flex: 1;">
						<text>联系电话：</text>
						<text style="flex: 1;">{{item.recvBook.phone}}</text>
					</view>
				</div>
			</uni-card>
		</view>
		<view v-if="branchList.length>0" style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">服务人员</view>
		</view>
		<!-- <template v-if="branchList.length>0"><uni-tag style="margin-left: 15px;" :inverted="true" text="服务人员" type="success" /></template> -->
		<view v-for="(item,index) in branchList" :key="index">
			<uni-card :title="'联系人:'+item.branchUser.userName" :sub-title="'电话:'+item.branchUser.phonenumber"  :extra="item.isSupervisor==='1'?'主管':''">
				<text>{{item.branchDept.deptName}}</text>
			</uni-card>
		</view>
		<view style="height: 50px;"></view>
	</div>
</template>

<script>
	import {getProjectDetails} from '@/api/system/project.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				formData:{}, //详情
				//收发货人集合
				shipList: [],
				//合作线路集合
				shipLineList:[],
				//服务人员
				branchList:[],
				//下拉框 ->结算方式
				settleType_: [],
				id: '',
			}
		},
		onLoad(e) {
			//根据客户id查询客户详情
			if(e.id)
			{
				uni.showLoading({
					title: '正在加载',
				})
				this.id = e.id
				//获取项目详情
				getProjectDetails(e.id).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data	
						//当前需要上传的合作路线
						this.shipLineList = this.formData.shipLineList||[]
						this.shipList = this.formData.shipList||[]
						this.branchList=this.formData.branchList||[]
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created() {
			//获取结算方式下拉框
			getDicts('settle_type').then(res=>{
				res.data.forEach(item=>{
					this.settleType_[item.dictValue]=item.dictLabel
				})
			})
		},
		methods: {
			
		},
	}
</script>

<style scoped>
::v-deep .uni-list-item__extra{
	flex: 1;
}
</style>